<template>
	<view>
		<u-navbar
			:title="detail.name || ' '"
			:bgColor="bgColor" 
			:titleStyle="{color: color}"
		>
			<view
				:style="{opacity: loading ? 0 : 1}"
				class="u-nav-slot u-border-top1 u-border-right u-border-bottom u-border-left"
				slot="left"
			>
				<u-icon
					name="arrow-left"
					size="20"
					color="#000"
					@click="back('back')"
				></u-icon>
				<u-line
					direction="column"
					:hairline="false"
					length="16"
					margin="0 8px"
				></u-line>
				<u-icon
					name="home"
					size="24"
					color="#000"
					@click="back('home')"
				></u-icon>
			</view>
		</u-navbar>
		<scroll-view @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
			</template>
			<template v-else>
				<u-swiper
					radius="0"
					:list="detail.image && detail.image.split(',')"
					indicator
					indicatorMode="line"
					circular
					height="260"
					@click="swiperClick"
				></u-swiper>
				<view style="padding: 32rpx;background-color: #fff;">
					<view class="flower-detail">
						<view class="left">
							<u--image radius="8rpx" :src="detail.image && detail.image.split(',')[0]" width="200rpx" height="200rpx"></u--image>
						</view>
						<view class="gap"></view>
						<view class="right">
							<view class="right-tile">{{detail.name || ''}}</view>
							<view class="right-item">
								<text class="right-item-l">别名: </text>
								<text>{{detail.alias || ''}}</text>
							</view>
							<view class="right-item">
								<text class="right-item-l">科属: </text>
								<text>{{detail.category_dictText || ''}}</text>
							</view>
						</view>
					</view>
					<view class="flower-content" style="margin-bottom: 16rpx;">
						<view style="font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">花语</view>
						<view style="font-size: 28rpx;text-indent: 56rpx;">{{detail.flowerLanguage || ''}}</view>
					</view>
					<view class="flower-content">
						<view style="font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">植物详情</view>
						<view style="font-size: 28rpx;text-indent: 56rpx;">{{detail.remark || ''}}</view>
					</view>
				</view>
			</template>
		</scroll-view>
		<view class="good-detail-bootom" v-if="!loading">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button openType="share" iconColor="#fff" :throttleTime="300" icon="share-fill" :color="appColor" text="分享好友" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {landPlantQueryById} from '@/api/home.js';
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				loading: false,
				scrollTop: 0,
				color: 'transparent',
				bgColor: 'transparent',
			}
		},
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 + this.statusBarHeight + 'px';
			},
		},
		onShareAppMessage () {
			let {image, name, remark, id} = this.detail;
			return {
				title: '[好友推荐]' + name,
				path: `/pageDiamond1/flowers/detail?id=${id}`,
				imageUrl: image.split(',')[0],
				content: remark,
				desc: remark,
				success: res => {
					console.info(res)
				}
			}
		},
		methods: {
			...mapActions(['setDetail']),
			swiperClick(index) {
				this.previewImg(index, this.detail.image)
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.split(',');
				uni.previewImage({
					current,
					urls,
				});
			},
			// 返回
			back(type) {
				if(type === 'back') {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.reLaunch({
						url: '/pages/startup'
					})
				}
			},
			handleScroll({detail}) {
				this.scrollTop = detail.scrollTop
				if (detail.scrollTop > 100) {
					this.color = '#000';
					this.bgColor = '#fff';
				} else {
					this.color = 'transparent';
					this.bgColor = 'transparent';
				}
			},
		},
		onLoad({id}) {
			if(id) {
				this.loading = true;
				this.$cuLoading('加载中...').then(() => {
					landPlantQueryById({id}).then(res => {
						this.setDetail({detail: res.result})
					}).finally(() => {
						uni.hideLoading();
						this.loading = false;
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
	.u-nav-slot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 100px;
		padding: 3px 7px;
	}
	.flower-content {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		padding: 32rpx;
	}
	.flower-detail {
		display: flex;
		margin-bottom: 32rpx;
		.left {
			width: 200rpx;
			height: 200rpx;
		}
		.gap {
			width: 32rpx;
		}
		.right {
			flex: 1;
			.right-tile {
				color: #333;
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 16rpx;
			}
			.right-item {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 8rpx;
				.right-item-l {
					padding-right: 16rpx;
				}
			}
		}
	}
</style>